<template>
	<view class="couponList">
		<view class="item" v-for="(item, index) in myLoseCouponList" :key="index">
			<view class="left">
				<view class="price">￥<text>{{item.face_value}}</text></view>
				<view class="priceName">{{item.type==1?'新人券':'满减券'}}</view>
			</view>
			<view class="right">
				<view class="title">{{item.title}}</view>
				<view class="desc">满{{item.full}}可用</view>
				<view class="time">有效期至：{{item.expire_time}}</view>
			</view>
			<view class="imgBox">
				<image src="/static/image/losecoupon.png" mode=""></image>
			</view>
		</view>
		<view class="hint">没有更多券了 |<text @click="openCouponList()">\t去领券中心领取</text></view>
	</view>
</template>

<script>
	import {dns} from '@/pages/dns.js'
	export default {
		data(){
			return {
				myLoseCouponList: []
			}
		},
		onLoad() {
			this.getMyLoseCouponList()
		},
		methods:{
			getMyLoseCouponList(){//获取我的优惠券列表
			var token = uni.getStorageSync("token");
				uni.request({
					method: 'GET',
					data: {
						page: 1,
						limit: 100,
						status: 0
					},
					header:{
						token: token
					},
					url: dns + 'Coupon/my',
					success: (res)=>{
						console.log(res);
						if(res.data.status == 1){
							this.myLoseCouponList = res.data.data
						}
						if(res.data.status == -1){
							uni.showToast({
								icon: 'none',
								title: res.data.msg,
								duration: 1500
							})
						}
					}
				})
			},
			openCouponList(){//进入优惠券中心
				uni.navigateTo({
					url: '/pages/index/coupon/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
		background-color: #f6f6f6;
	}
	.couponList{
		padding: 30upx 20upx;
		background-color: #f6f6f6;
		.item{
			position: relative;
			width: 100%;
			height: 180upx;
			background-color: #fff;
			border-radius: 10upx;
			display: flex;
			margin-bottom: 20upx;
			.left{
				color: #cdcdcd;
				width: 30%;
				height: 100%;
				padding-left: 40upx;
				padding-top: 32upx;
				.price{
					font-size: 26upx;
					text{
						font-size: 52upx;
					}
				}
				.priceName{
					font-size: 26upx;
					line-height: 20upx;
				}
			}
			.right{
				color: #cdcdcd;
				width: 60%;
				height: 100%;
				padding-top: 30upx;
				.title{
					font-size: 30upx;
					margin-bottom: 4upx;
					color: #cdcdcd;
				}
				.time{
					font-size: 24upx;
				}
				.desc{
					font-size: 24upx;
					margin-bottom: 4upx;
				}
			}
			.imgBox{
				position: absolute;
				right: 8upx;
				top: 20upx;
				width: 120upx;
				height: 120upx;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
		.hint{
			text-align: center;
			font-size: 24upx;
			color: #7f7f7f;
			text{
				color: #ed702d;
			}
		}
	}
</style>
